<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/myCss.css">
    <link rel="shortcut icon" href="./img/favicon.png">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/sweetAlert2.css">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/sweetalert2.all.js"></script>
    <title>登录</title>

    <style>
        body {
            background-image: url(./img/login.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .win {
            /* background: rgba(0, 0, 0, 0.3); */
            height: 500px;
            width: 800px;
            position: absolute;
            top: 100px;
            left: 400px;
            border-radius: 20px;
            box-shadow: 0px 0px 18px;
            /*设置背景阴影*/
            overflow: hidden;

        }

        .left {
            width: 500px;
            height: 500px;
            /* overflow: hidden; */
            /* background-image: url(./img/login_left.jpg);
                    background-repeat:no-repeat;
                    background-size: 100%; */
            /* opacity: 0.3;  */
            float: left;
        }

        .left img {
            opacity: 0.8;
            width: 100%;

        }

        .right {
            float: left;
            width: 300px;
            height: 500px;
            background-image: url(./img/right.webp);
            background-size: 100%;
            opacity: 0.8;
            /* background: linear-gradient(to right, rgb(209, 152, 152) , rgb(220, 120, 215)); */
            /* background-color: rgba(0, 0, 0, 0.319); */
        }

        td {

            line-height: 80px;
        }

        th {
            text-align: right;
            font-size: 20px;
            color: rgb(238, 76, 160);
            font-weight: bold;
        }


        input {
            font-size: 23px;
            padding-left: 10px;
            margin-left: 22px;
            color: rgb(44, 153, 238);
            background: rgba(187, 187, 187, 0.368);
            width: 250px;
            height: 35px;
            /* border-radius: 12px; */
            border: 1px solid rgba(187, 187, 187, 0.368);
        }

        input:hover {
            border: 1px solid rgb(44, 153, 238);
        }

        select,
        option {
            margin-left: 20px;
            color: rgb(44, 153, 238);
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            width: 250px;
            height: 40px;
            background: rgba(187, 187, 187, 0.368);
            border: 1px solid rgba(187, 187, 187, 0.368);
        }

        option {
            color: rgb(44, 153, 238);
        }

        #reset,
        #log {
            line-height: 10px;

        }

        #reset {
            position: relative;
            top: -35px;
        }

        #reset:hover,
        #log:hover {
            background-color: rgb(44, 153, 238);
            color: white;
        }

        a {
            margin-left: -70px;
            color: red;
        }

        a:hover {
            color: rgb(44, 153, 238);
        }
    </style>
    <script>
        //创建学生集合
        var users = {
            "刘文君": "123",
            "张三": "103",
            "李四": "121",
            "王五": "113"
        }
        //创建教师集合
        var teachers = {
            "李华": "111",
            "张春荣": "100",
            "蒋健": "121"
        }
        //创建管理员集合
        var adimns = {
            "admin": "000"
        }

        $(function () {
            // 给登录按钮绑定点击事件
            $("#log").click(function () {
                //获取用户框的数据
                let user = $(":text").val();
                //获取密码框的数据
                let pwd = $(":password").val();
                //获取登录身份
                let status = $("select").val();
                // console.log(user+" "+pwd+""+status);
                if (user == "") {
                    alert("请填写用户名！")
                    $(":text").focus();
                } else {
                    //判断密码
                    if (pwd == "") {
                        alert("密码不能为空！")
                        $(":password").focus();
                    } else {




                        //判断用户身份
                        if (status == -1) {
                            alert("请选择登录身份！")
                            $("select").focus();
                        } else {
                            if (status == "学生") {
                                //定义变量，判断用户名是否存在
                                index = -1;//默认不存在
                                //遍历学生集合
                                $.each(users, function (k, v) {
                                    if (k == user) {
                                        index = 1;
                                    }
                                });
                                if (index == -1) {
                                    new swal({
                                        title: '用户名不存在！',
                                        color: 'red',
                                        text: '2秒后自动关闭。',
                                        timer: 2000
                                    }).then(
                                        function () { },

                                        function (dismiss) {
                                            if (dismiss === 'timer') {
                                                console.log('I was closed by the timer')
                                            }
                                        }
                                    )
                                } else {
                                    //此时存在，判断密码是否正确
                                    if (pwd === users[user]) {
                                        new swal(
                                            '登录成功！',
                                            '点击刷新！',
                                            'success'
                                        );
                                        setTimeout(function () {

                                            open(encodeURI("indexStu.html?name=" + user + "&status*" + status));
                                            location.reload();
                                        }, 2000);
                                    } else {
                                        new swal({
                                            title: '用户名或密码错误！',
                                            color: 'rgb(44, 153, 238)',
                                            text: '2秒后自动关闭。',
                                            timer: 2000
                                        }).then(
                                            function () { },

                                            function (dismiss) {
                                                if (dismiss === 'timer') {
                                                    console.log('I was closed by the timer')
                                                }
                                            }
                                        )
                                    }
                                }

                            } else if (status == "教师职工") {
                                //定义变量，判断用户名是否存在
                                index = -1;//默认不存在
                                //遍历教师集合
                                $.each(teachers, function (k, v) {
                                    if (k == user) {
                                        index = 1;
                                    }
                                });
                                if (index == -1) {
                                    new swal({
                                        title: '用户名不存在！',
                                        color: 'red',
                                        text: '2秒后自动关闭。',
                                        timer: 2000
                                    }).then(
                                        function () { },

                                        function (dismiss) {
                                            if (dismiss === 'timer') {
                                                console.log('I was closed by the timer')
                                            }
                                        }
                                    )
                                } else {
                                    //此时存在，判断密码是否正确
                                    if (pwd === teachers[user]) {
                                        new swal(
                                            '登录成功！',
                                            '点击刷新！',
                                            'success'
                                        );
                                        setTimeout(function () {
                                            open(encodeURI("indexTeacher.html?name=" + user + "&status*" + status));
                                            location.reload();
                                        }, 2000);
                                    } else {
                                        new swal({
                                            title: '用户名或密码错误！',
                                            color: 'rgb(44, 153, 238)',
                                            text: '2秒后自动关闭。',
                                            timer: 2000
                                        }).then(
                                            function () { },

                                            function (dismiss) {
                                                if (dismiss === 'timer') {
                                                    console.log('I was closed by the timer')
                                                }
                                            }
                                        )
                                    }
                                }
                            } else if (status == "管理员") {
                                //定义变量，判断用户名是否存在
                                index = -1;//默认不存在
                                //遍历管理员集合
                                $.each(adimns, function (k, v) {
                                    if (k == user) {
                                        index = 1;
                                    }
                                });
                                if (index == -1) {
                                    new swal({
                                        title: '用户名不存在！',
                                        color: 'red',
                                        text: '2秒后自动关闭。',
                                        timer: 2000
                                    }).then(
                                        function () { },

                                        function (dismiss) {
                                            if (dismiss === 'timer') {
                                                console.log('I was closed by the timer')
                                            }
                                        }
                                    )
                                } else {
                                    //此时存在，判断密码是否正确
                                    //根据键取值  adimns[user]                          
                                    if (pwd === adimns[user]) {
                                        new swal(
                                            '登录成功！',
                                            '点击刷新！',
                                            'success'
                                        );
                                        setTimeout(function () {
                                          
                                            open(encodeURI("indexAdmin.html?name=" + user + "&status*" + status));
                                            location.reload();
                                        }, 2000);
                                    } else {
                                        new swal({
                                            title: '用户名或密码错误！',
                                            color: 'rgb(44, 153, 238)',
                                            text: '2秒后自动关闭。',
                                            timer: 2000
                                        }).then(
                                            function () { },

                                            function (dismiss) {
                                                if (dismiss === 'timer') {
                                                    console.log('I was closed by the timer')
                                                }
                                            }
                                        )
                                    }
                                }
                            }
                        }
                    }
                }

            });

            //点击保存时触发的事件
            $("#save").click(function () {
                //获取用户名
                let user = $("#u").val();
                index = -1;//默认不存在
                //查找所有集合，看是否有这个用户名
                //遍历学生集合
                $.each(users, function (k, v) {
                    if (k == user) {
                        index = 1;
                    }
                });
                //遍历教师集合
                $.each(teachers, function (k, v) {
                    if (k == user) {
                        index = 2;
                    }
                });
                //遍历管理员集合
                $.each(adimns, function (k, v) {
                    if (k == user) {
                        index = 3;
                    }
                });
                if (index == -1) {
                    $("#s").html("该账号不存在").css("color", "red");
                } else {
                    //表示账号存在
                    switch (index) {
                        case 1:
                            // 修改学生集合里用户输入的用户名的密码
                            users[user] = $("#m").val();
                            $("#s").html("修改成功");
                            break;

                        case 2:
                            // 修改学生集合里用户输入的用户名的密码
                            teachers[user] = $("#m").val();
                            $("#s").html("修改成功");
                            break;
                        case 3:
                            // 修改学生集合里用户输入的用户名的密码
                            adimns[user] = $("#m").val();
                            $("#s").html("修改成功");
                            break;
                    }
                }
            });

            //当点击关闭的时候清空数据
            $("#close").click(function () {
                $("#u").val("");
                $("#m").val("");
                $("#s").html("");
            })
            //点击注册跳转到注册页面
            $("#reset").click(function () {
                open("register.html");
            })
            //页面一加载就轮播图片
            let i = 1;
            setInterval(function () {
                // 获取背景控件
                $("body").css("background-image", "url(./img/" + i + ".jpg)");
                $("body").css("transition", "4s");
                i++;
                if (i == 21) {
                    i = 1;
                }
            }, 4000);
        });


    </script>
</head>

<body>
    <!-- 登录窗体 -->
    <div class="win">
        <!-- 左侧图片 -->
        <div class="left">
            <img src="./img/login_left.webp" alt="" srcset="">
        </div>
        <!-- 右侧选项 -->
        <div class="right">
            <h1
                style="text-align: center;color: rgb(19, 138, 228);padding-left:30px ; font-weight: bold; letter-spacing: 1em;">
                登录</h1>
            <form action="index.html" method="get">
                <table>
                    <tr>
                        <!-- <th>用户名：</th> -->
                        <td>
                            <input type="text" placeholder="用户名" required>
                        </td>
                    </tr>
                    <tr>
                        <!-- <th>密码：</th> -->
                        <td>
                            <input type="password" placeholder="密码" required>
                        </td>
                    </tr>
                    <tr>
                        <!-- <th> 登录身份：</th> -->
                        <td>
                            <select name="" id="">
                                <option value="-1">选择登录身份</option>
                                <option value="学生">学生</option>
                                <option value="教师职工">教师职工</option>
                                <option value="管理员">管理员</option>

                            </select>
                        </td>
                    </tr>
                    <!-- 登录按钮 -->
                    <tr>
                        <td>
                            <input type="button" value="登录" id="log">
                        </td>
                    </tr>
                    <!-- 注册按钮 -->
                    <tr>
                        <td>
                            <input type="button" value="注册" id="reset">
                            <a data-toggle="modal" data-target="#myModal">忘记密码？</a>
                        </td>
                    </tr>
                    <!-- 忘记密码 -->
                </table>
            </form>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">忘记密码</h4>
                </div>
                <div class="modal-body">
                    <b>用户名：</b>
                    <input type="text" name="user" id="u">
                    <span id="s"></span>
                    <BR></BR>
                    <b>新密码：</b>
                    <input type="password" name="pwd" id="m" placeholder="请输入新密码">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="close" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/bootstrap.min.js"></script>

</body>

</html>